<template>
  <div class="ls-amap">
    <div>
      <el-input size="small" v-model="value" ></el-input>
      <el-button icon="el-icon-s-promotion" type="primary" size="small" @click="openMap" >打开地图</el-button>
    </div>
    <el-dialog :visible.sync="visible" width="80%" title="地图" append-to-body >
      <div class="map-container">
        <div id="container" style="width: 100%;height: 700px"></div>
        <div class="search">
          <el-input type="small" suffix-icon="el-icon-search" v-model="word" @input="search"></el-input>
        </div>
        <div id="panel" v-show="word"></div>
      </div>
      <div class="footer" slot="footer">
        <el-button  size="small" @click="visible = false">取消</el-button>
        <el-button type="primary" size="small" @click="submit">确定</el-button>
      </div>
    </el-dialog>
    
  </div>
</template>

<script>
export default {
  name: 'ls-amap',
  props: {
    defaultValue: [String, Number]
  },
  computed: {
    value: {
      get () {
        return this.defaultValue
      },
      set (v) {
        this.$emit('EventHandler', 'change', this.$attrs.prop, v)
      }
    }
  },
  data () {
    return {
      map: null,
      visible: false,
      placeSearch: null,
      word: '',
      currentMark: null,
      center: ['104.066301', '30.572961']
    }
  },
  methods: {
    openMap() {
      this.visible = true
      this.word = ''
      this.$nextTick(() => {
        this.newMap()
      }) 
    },
    search (v) {
      this.placeSearch.search(v)
    },
    newMap () {
      if (this.value) this.center = this.value.split(',')
      console.log(this.center)
      this.map = new AMap.Map('container', {
        resizeEnable: true, //是否监控地图容器尺寸变化
        zoom:11, //初始化地图层级
        center: this.center //初始化地图中心点
      });
      this.placeSearch = new AMap.PlaceSearch({
        map: this.map,
        panel: "panel",
        autoFitView: true 
      });
      this.placeSearch.on('markerClick', (e) => {
        console.log(e)
        this.selectMark(e.data)
      })
      this.placeSearch.on('selectChanged', (e) => {
        console.log(e)
        this.selectMark(e.selected.data)
      })
      if (this.value) {
        this.addMarker(this.center)
      }
    },
    selectMark (data) {
      this.currentMark = data
    },
    submit () {
      if (!this.currentMark) {
        this.$message.error('请选择位置')
        return
      }
      this.visible = false
      console.log(this.currentMark)
      this.value = this.currentMark.location.lng + ',' + this.currentMark.location.lat
    },
    addMarker(position) {
        const marker = new AMap.Marker({
            icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
            position: position,
            offset: new AMap.Pixel(-13, -30)
        });
        marker.setMap(this.map);
    }
  }
}
</script>


<style lang="scss">
.map-container{
  position: relative;
  .search{
    position: absolute;
    left: 30px;
    top: 20px;
    .el-input{
      width: 300px;
    }
  }
  #panel{
    position: absolute;
    left: 30px;
    top: 50px;
    width: 300px;
    max-height: 500px;
    overflow: auto
  }
  img{
    width: 25px;
    height: 34px;
  }
}

</style>

